<template>
  <view>
    <!-- 分类导航栏 -->
    <view class="nav">
      <block v-for="(item , i) in navName" :key="i">
        <view :class="['title', i === active ? 'active' : '']" @click="activeChanged(i)">
          {{item}}
        </view>
      </block>
    </view>
    <!-- 二级页面 -->
    <view class="list">
      <view class="order-item" v-for="(item,i) in list">
        <view class="gotoDetail" @click="gotoDetail(item)">
          <view class="head">
            <text class="type">{{navName[active]}}</text>
            <text class="shop">{{item.name}}</text>
            <text class="status" style="color: #bebebe;" v-if="item.status=='已取消'">{{item.status}}</text>
            <text class="status" style="color: #F77214;"
              v-if="['待支付','制作中','待消费','配送中'].includes(item.status)">{{item.status}}</text>
            <text class="status" v-if="item.status=='已完成'">{{item.status}}</text>
          </view>
          <view class="shop-body" v-if="item.status=='待消费'">
            <image :src="item.item[0].picture" class="image"></image>
            <view class="name">
              <text>{{item.item[0].name}}</text>
              <text>价值{{item.item[0].price}}元</text>
            </view>
            <view class="sub-name">
              <text>{{item.item[0].integral}}积分</text>
              <text>× {{item.item[0].count}}</text>
            </view>
          </view>
          <view class="body" v-else>
            <view class="items">
              <view class="item" v-for="(v,i) in item.item" :key="i" v-if="i<3">
                <image :src="v.picture"></image>
                <text>{{v.name}}</text>
              </view>
            </view>
            <view class="total">
              <text>￥{{item.price}}</text>
              <text style="color: #bebebe;">共{{item.total}}件</text>
            </view>
          </view>
        </view>
        <view class="bottom">
          <view class="button" v-if="item.status=='待支付'">
            <button style="color: #bebebe;" @tap="cancel(item.id)">取消订单</button>
            <button style="color: white;background-color: #F77214;" @click="gotoCheckout(item.price)">立即支付</button>
          </view>
          <view class="button" v-if="item.status=='制作中'">
            <button @click="reminder">催单</button>
          </view>
          <view class="button" v-if="item.status=='已取消' || item.status=='已完成'">
            <button @click="gotoDin(item)">再来一单</button>
          </view>
          <view class="button" v-if="item.status=='配送中'">
            <button style="color: white;background-color: #F77214;" @tap="receive(item.id)">确认收货</button>
          </view>
          <view class="button" v-if="item.status=='待消费'">
            <button style="color: #bebebe;" @click="open">查看券码</button>
            <uni-popup ref="popup" :mask-click="false">
              <view class="first-wait">
                <view class="top">
                  <image :src="item.item[0].picture" class="image"></image>
                  <view class="title">
                    <text>{{item.item[0].name + ' ' + item.count}}杯 堂食可用</text>
                    <text>{{item.item[0].integral}}积分</text>
                  </view>
                </view>
                <view class="middle">
                  <text>券码 {{item.item[0].code}}</text>
                  <text>有效期至{{item.item[0].vaild}}</text>
                </view>
                <view class="bottom">
                  <image :src="item.item[0].ercode1"></image>
                </view>
              </view>
              <view class="close" @click="close">
                <text>×</text>
              </view>
              <!-- <button @click="close" class="close">×</button> -->
            </uni-popup>
          </view>

        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import http from '../../utils/http.js';
  export default {
    data() {
      return {
        status: [], //存放所有订单状态
        userid: '',
        navName: ['堂食', '外送', '商城订单'],
        active: 0,
        list: [],
        //写静态时的数据alist
        alist: [{
          'time': '2022-11-08 14:06:28',
          'shopname': '黛西餐厅（中海大厦点）',
          'status': '待支付',
          'item': [{
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png',
            'price': 42.0,
            'peopleNum': 1,
            'count': 1,
          }, {
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png',
            'price': 42.0,
            'peopleNum': 1,
            'count': 1,
          }, {
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png',
            'price': 42.0,
            'peopleNum': 1,
            'count': 1,
          }, {
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png',
            'price': 42.0,
            'peopleNum': 1,
            'count': 1,
          }, ],
          'price': 106,
          'total': 3,
          'discount': 15.6,
          'shopinfo': {
            '门店名称': '上海中海大厦店',
            '门店地址': '上海市静安区江场三路134号',
            '联系方式': '19166009090'
          },
          'orderinfo': { //6种类型的订单好像都有些微差别
            '就餐方式': '堂食',
            '用餐人数': '3人',
            '桌号': 'A03',
            '订单编号': 'S11234420221002090009',
            '下单时间': '2022-10-07 10:09:08',
            '支付方式': '微信支付',
            '联系方式': '156709066655',
            '备注': '无'
          }
        }, {
          'time': '2022-11-08 14:06:28',
          'shopname': '黛西餐厅（中海大厦点）',
          'status': '配送中',
          'item': [{
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png',
            'price': 42.0,
            'peopleNum': 1,
            'count': 1,
          }, {
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png',
            'price': 42.0,
            'peopleNum': 1,
            'count': 1,
          }],
          'feetotal': 4,
          'price': 106,
          'total': 3,
          'discount': 15.6
        }, {
          'time': '2022-11-08 14:06:28',
          'shopname': '黛西餐厅（中海大厦点）',
          'status': '待消费',
          'item': [{
            'name': '草莓冰沙300ml',
            'picture': 'https://cdn8.axureshop.com/demo/2116044/images/%E8%AE%A2%E5%8D%95/u3189.png'
          }],

          'price': 18,
          'integral': '200',
          'count': 1,
          'code': '0609 0080 7758',
          'vaild': '2023.08.06',
          'ercode1': 'https://cdn8.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u621.png',
        }]
      }
    },
    methods: {
      gotoCheckout(price) {
        uni.navigateTo({
          url: '/pages/checkout/checkout?paymoney=' + price
        })
      },
      open() {
        this.$refs.popup[0].open('center')
      },
      close() {
        this.$refs.popup[0].close()
      },
      reminder() {
        uni.showToast({
          title: '催单成功',
          icon: 'success'
        });
      },
      gotoDin(item) {

        uni.setStorageSync('shopid', 1);
        // uni.setStorageSync('number', 1);
        uni.setStorageSync('address', item.shopinfo[0]['门店地址']);
        uni.switchTab({
          url: '/pages/Dine-in/Dine-in'
        })
      },
      receive(orderid) {
        uni.showModal({
          content: '当前订单正在配送中，确认已收到商品吗？',
          confirmText: '确定',
          cancelText: '放弃',
          confirmColor: '#F77214',
          success: (res) => {
            if (res.confirm) {
              // console.log('用户点击确定');
              http({
                url: `/receiveList`,
                method: 'post',
                data: {
                  orderid
                },
                success: (res) => {
                  if (res.data.msg == '成功') {
                    uni.showToast({
                      title: '已确认收货',
                      icon: 'success'
                    })
                    this.getList();
                  } else {
                    uni.showToast({
                      title: res.data.msg,
                      icon: 'error'
                    })
                  }
                }
              })

            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });

      },
      cancel(orderid) {
        uni.showModal({
          content: '确定取消该订单吗？',
          confirmText: '确定',
          cancelText: '放弃',
          confirmColor: '#F77214',
          success: (res) => {
            if (res.confirm) {
              // console.log('用户点击确定');
              http({
                url: `/cancelList`,
                method: 'post',
                data: {
                  orderid
                },
                success: (res) => {
                  if (res.data.msg == '取消成功') {
                    uni.showToast({
                      title: '取消成功',
                      icon: 'success'
                    })
                    this.getList();
                  } else {
                    uni.showToast({
                      title: res.data.msg,
                      icon: 'error'
                    })
                  }
                }
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
      gotoDetail(item) {
        uni.navigateTo({
          url: '/pages/listDetail/listDetail?item=' + JSON.stringify(item),
          // success: res => {},
          // fail: () => {},
          // complete: () => {}
        });
      },
      activeChanged(i) {
        this.active = i
        this.getList();
        this.timer();
      },
      getList() {
        http({
          url: `/list`,
          params: {
            active: this.navName[this.active],
            userid: this.userid
          },
          success: (res) => {
            if (res.data.msg == '获取成功') {
              this.list = res.data.listData;

              //存放所有订单状态
              for (let i in this.list) {
                let istatus = {};
                istatus.id = this.list[i].id;
                istatus.status = this.list[i].status;
                istatus.type = this.list[i].orderinfo[0]['就餐方式']
                // console.log(istatus);
                this.status.push(istatus)
              }
            } else {
              uni.showToast({
                title: res.data.msg,
                icon: 'error'
              })
              // uni.navigateTo({
              //   url: '/pages/empty/empty'
              // })

            }
          }
        })

      },
      timer() {
        var timer = null;
        timer = setTimeout(() => {
          // clearInterval(timer) //只调用一次
          //十五分钟后调用this.getList()  发送请求改变状态
          http({
            url: `/refreshlList`,
            method: 'post',
            data: {
              os: this.status
            },
            success: (res) => {
              if (res.data.msg == '刷新成功') {
                this.getList();
                this.status = []
              } else {
                this.status = []
                this.getList();
              }
            }
          })

        }, 900000); //900000
      }
    },
    onShow() {
      let id = uni.getStorageSync("userid")
      // console.log();
      // let phone = uni.getStorageSync("phone")
      if (!id) {
        uni.navigateTo({
          url: '/pages/empty/empty'
        })
      } else {
        this.userid = id
        this.getList();
      }



    },
    onLoad() {
      //定时器 15分钟后改变状态，待支付->已取消，制作中->已完成（堂食）  || 配送中（外送），配送中->已完成

      this.timer();

    }
  }
</script>

<style lang="scss">
  // 分类导航栏
  .nav {
    display: flex;
    justify-content: space-around;
    margin: 10rpx;
    // text-align: center;
    // background-color: whitesmoke;

    .title {
      font-size: 30rpx;
      line-height: 40rpx;
      padding: 20rpx 0;


      &.active {

        position: relative;
        color: #F77214;

        &::before {
          content: ' ';
          display: block;
          width: 100%;
          height: 2px;
          background-color: #F77214;
          position: absolute;
          // left: -10rpx;
          top: 100%;
          transform: translateY(80%);

        }
      }
    }
  }

  // 每个订单
  .list {
    .order-item {
      margin: 44rpx 44rpx;
      background-color: white;
      border-radius: 20rpx;

      .gotoDetail {
        display: flex;
        flex-direction: column;
        align-items: center;

        .head {
          width: 90%;
          padding: 30rpx 0;
          border-bottom: solid 2rpx #bebebe50;
          display: flex;
          align-items: center;

          .type {
            width: 120rpx;
            height: 40rpx;
            color: white;
            background-color: black;
            border-radius: 20rpx;
            font-size: 28rpx;
            text-align: center;
          }

          .shop {
            margin-left: 10rpx;
            font-size: 33rpx;
          }

          .status {
            font-size: 26rpx;
            margin-left: 20rpx;
          }
        }

        .shop-body {
          width: 90%;
          display: flex;
          align-items: center;
          margin: 20rpx 0;
          padding-bottom: 30rpx;
          border-bottom: solid 2rpx #bebebe50;

          .image {
            width: 120rpx;
            height: 120rpx;
          }

          .name {
            display: flex;
            flex-direction: column;
            margin: 20rpx 20rpx;
            flex: 2;

            text:nth-child(1) {
              font-size: 28rpx;
              margin-bottom: 25rpx;
            }

            text:nth-child(2) {
              font-size: 26rpx;
              color: #bebebe;
            }
          }

          .sub-name {
            display: flex;
            flex-direction: column;

            text:nth-child(2) {
              align-self: flex-end;
              margin-top: 25rpx;
            }
          }
        }

        .body {
          width: 90%;
          margin: 20rpx 0;
          display: flex;
          justify-content: space-around;
          align-items: center;
          border-bottom: solid 2rpx #bebebe50;

          .items {
            display: flex;
            flex: 2;

            .item {
              display: flex;
              flex-direction: column;
              padding: 20rpx 10rpx;

              image {
                width: 140rpx;
                height: 140rpx;
              }

              text {
                width: 150rpx;
                font-size: 26rpx;
                color: #bebebe;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }

          }

          .total {
            display: flex;
            flex-direction: column;

            text {
              padding: 10rpx;
            }
          }
        }
      }

      .bottom {
        .button {
          display: flex;
          justify-content: flex-end;


          button {
            border-radius: 30rpx;
            font-size: 28rpx;
            margin: 10rpx 20rpx;
          }

        }

        .uni-popup {

          .first-wait {
            margin: 44rpx 44rpx;
            background-color: white;
            border-radius: 20rpx;

            .top {
              display: flex;
              padding: 30rpx 30rpx;
              align-items: center;

              .image {
                width: 120rpx;
                height: 120rpx;
              }

              .title {
                display: flex;
                flex-direction: column;
                flex: 2;
                margin: 0 15rpx;

                text:nth-child(1) {
                  font-size: 35rpx;
                  margin-bottom: 10rpx;
                }

                text:nth-child(2) {
                  color: #bebebe;
                }
              }
            }

            .middle {
              display: flex;
              flex-direction: column;
              padding: 50rpx 0;
              margin: 20rpx 20rpx;
              border-bottom: #bebebe dashed 2rpx;
              border-top: #bebebe dashed 2rpx;

              text:nth-child(1) {
                font-size: 40rpx;

              }

              text:nth-child(2) {
                color: #bebebe;
                font-size: 28rpx;

              }
            }

            .bottom {
              display: flex;
              justify-content: center;
              align-items: center;


              image {
                width: 250rpx;
                height: 250rpx;
                margin-bottom: 30rpx;
              }
            }
          }

          .close {
            border-radius: 50%;
            background-color: white;
            width: 80rpx;
            height: 80rpx;
            font-size: 60rpx;
            margin: 0 auto;
            text-align: center;
          }

        }
      }
    }
  }
</style>
